Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation Overlay customisation via Template Parts #55657

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Oct 27, 2023

⚠️ This is a WIP PR. Please review for overlay "experience" only.

🔧 List of outstanding tasks is here.

Closes #43852 and #39142


What?

Provides the ability to fully customise the overlay that is shown when the Navigation block is rendered on a smaller viewport (e.g. "mobile" phone).

Closes #39142 and #38201 and #43852

Alternative to this branch.

Co-authored-by: Ben Dwyer [email protected]
Co-authored-by: Rich Tabor [email protected]
Co-authored-by: Maggie [email protected]
Co-authored-by: Alex Lende [email protected]
Co-authored-by: Jerry Jones [email protected]
Co-authored-by: Andrei Draganescu [email protected]

Why?

Currently users only have minimal control over the contents and apperance of the overlay menu that is shown when clicking on the "hamburger" icon button which is shown when the Navigation block is rendered on smaller viewports.

This is very restricting and also very difficult to provide adequate control over because the exact same block (e.g. markup) is used on "desktop" layout and "mobile" layout.

Users have repeatedly requested the ability to

  • have greater control over the styling of the Navigation that is shown in the overlay.
  • have the ability to have different menu items in the Navigation within the overlay
  • have the ability to place additional content (e.g. social icons) within the overlay

This PR seeks to address this requirement as an opt in experience, whilst also maintaining full backwards compatibility with the existing experience (😅).

How?

The premise of this PR is that the overlay should be a template part. This allows us to render the overlay's blocks within a dedicated editor (e.g. the same editor you use to edit your "Header" template part) and therefore provide full customisation of its contents.

At a high level it should work like this:

  • user selects the ("parent") Navigation block.
  • user wishes to customise how the Navigation displays on smaller viewports
  • user clicks the "Edit" control (specifics subject to change) which then opens the overlay within the template part editor
  • user sees the overlay and can fully customise the display of the overlay. By default the overlay contains a Navigation block, preconfigured to have the same menu as it's parent block (i.e. the one which controls the overlay).
  • user saves the overlay and returns back to the Site Editor
  • the user views the front of their site
  • by default they see the "parent" Navigation block on larger viewports
  • on a smaller viewport the user clicks the hamburger icon button (the one which toggles the "overlay")
  • the user sees the customised overlay which they previously created in the editor

By default a new "Overlay" template part is created for each Navigation Menu (not block) only when the user chooses to customise the overlay.

The overlay template part will be created from a template part named navigation-overlay.html meaning the Themes can provide a default Overlay.

Similarly, if the user creates their own "Navigation Overlay" template part within the editor then this will be used.

If a Theme does not provide an Overlay, then a default "Core" template will be used instead.

User Requirements

Please see the list of user stories on the Issue description.

Tasks

  • Click hamburger in editor to launch overlay template part editing mode.
  • Remove all custom styles that are applied to the overlay to allow the changes made to the overlay in the editor to provide the "styling" for the overlay. Obviously we'll need to apply this conditionally only when there is a custom overlay so as to preserve backwards compatibility.
    • Front of site
    • Editor (not required as we go to the template part editor instead 🎉 ).
  • Make the template part editor "full height" when editing the Overlay.
  • The "Close" X button can become a simple block which only has minimal options.
  • Lock the Overlay block and disable inserting other blocks outside of the Overlay block. We can lean into what I did for the focus mode for Navigation (but get rid of the back button (see above).
  • As soon as you create a custom overlay we should remove the control for styling the overlay (e.g. Submenu & overlay text/background options) on the Nav block (in parent and the block in the overlay). We should however, leave in the Submenu part of the control as we still need to be able to Style submenus.
  • Add back button to top bar in Overlay editing mode as per as per what we have now for Page Template editing implementation. (This was complete but regressed due to Site and Post Editor: Unify the DocumentBar component #56778).
  • Update overlay creation logic to always optimise to re-use what the user already has. So that might be:
    • a previously created overlay template part
    • the Theme's default overlay template part
    • we should only fallback to the "plain" Core version of the overlay as a last resort.
  • Ensure backwards compatibility with existing overlay approach in Core so that everything continues to work if one does not have a custom overlay.
  • Set the template part resizable canvas into a mobile viewport by default when this template part gets loaded. We decided against optimising for this for now.

Ready for Dev

  • Make the Navigation Overlay Close block actually close the overlay in the editor if it is clicked when the block is already selected. This mirrors the behaviour of the hamburger,
  • Hide the Display panel within inspector controls entirely for the navigation within the overlay.
  • Disable inheritance of any color settings from the parent Nav block.
  • Make Core navigation-overlay template file a .php file and implement translation of all strings.
  • Submenus shown within the Navigation block within the overlay are showing on hover and do not match the display of the front of the site.
  • Create a Default setting for the Overlay's vertical padding which automatically takes into account the following variables that are outside of the "editor":
    • whether or not the "admin bar" is shown on the front of site
    • global padding value (coming from the Theme)

Testing Instructions

⚠️ This is currently a WIP and thus you may experience bugs/issues. A full testing procedure will be provided once the PR is marked ready for review:

  • Open Site Editor
  • Click Nav Block in Header of site..
  • Open inspector controls and locate the "Overlay" controls with the heading Overlay Menu.
  • Set the menu to Always as this makes testing easier.
  • Click the "Edit" button next to the heading OVERLAY MENU.
  • The overlay is opened in the template part editor.
  • Customise your overlay so that it is distinct and the save.
  • Return to the Site Editor.
  • Click on the "hamburger" (3 lines) icon button.
  • See you are returned to the Overlay editor.
  • Go back to the Site Editor.
  • Go to the front of your site.
  • Toggle the overlay using the "hamburger".

Testing Instructions for Keyboard

Screenshots or screencast

@github-actions
Copy link

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: .

Read more about Type labels in Gutenberg.

1 similar comment
@github-actions
Copy link

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: .

Read more about Type labels in Gutenberg.

@getdave getdave requested a review from draganescu October 27, 2023 06:40
@github-actions
Copy link

github-actions bot commented Oct 27, 2023

Size Change: +2.03 kB (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 249 kB -22 B (0%)
build/block-library/blocks/navigation/editor-rtl.css 2.31 kB +57 B (+3%)
build/block-library/blocks/navigation/editor.css 2.32 kB +55 B (+2%)
build/block-library/blocks/navigation/style-rtl.css 2.37 kB +110 B (+5%) 🔍
build/block-library/blocks/navigation/style.css 2.36 kB +111 B (+5%) 🔍
build/block-library/editor-rtl.css 12.4 kB +38 B (0%)
build/block-library/editor.css 12.4 kB +38 B (0%)
build/block-library/index.min.js 217 kB +1.25 kB (+1%)
build/block-library/style-rtl.css 14.9 kB +171 B (+1%)
build/block-library/style.css 14.9 kB +171 B (+1%)
build/edit-site/index.min.js 214 kB +68 B (0%)
build/edit-site/style-rtl.css 15.3 kB -9 B (0%)
build/edit-site/style.css 15.3 kB -9 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.35 kB
build/block-editor/content.css 4.35 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.69 kB
build/block-library/blocks/cover/style.css 1.68 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 B
build/block-library/blocks/navigation-overlay-close/style-rtl.css 230 B
build/block-library/blocks/navigation-overlay-close/style.css 230 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/view.min.js 1.02 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 614 B
build/block-library/blocks/search/style.css 614 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 229 B
build/block-library/blocks/separator/style.css 229 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/index.min.js 223 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.32 kB
build/customize-widgets/style.css 1.32 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.93 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 23.8 kB
build/edit-post/style-rtl.css 5.64 kB
build/edit-post/style.css 5.63 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.22 kB
build/edit-widgets/style.css 4.22 kB
build/editor/index.min.js 63.7 kB
build/editor/style-rtl.css 5.32 kB
build/editor/style.css 5.32 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.89 kB
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 12.7 kB
build/interactivity/navigation.min.js 1.15 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.29 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 5.79 kB
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.82 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.08 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Oct 27, 2023

Flaky tests detected in d8b1479.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7226914157
📝 Reported issues:

@getdave
Copy link
Contributor Author

getdave commented Nov 9, 2023

Todo

Dumping a load of todos that are top of mind:

  • Disable overlay controls for the Nav block within the overlay. How do we do this?
  • Use metadata to provide a custom name for the Group block in the overlay (e.g. Overlay Background).
  • Potentially lock the Group block within the overlay to prevent removal.
  • Is it possible to sync the block in the overlay so that if the menu in the parent Navigation block is changed then the menu in the overlay Navigation block is also changed. This is problematic because the overlay is custom based on the menu.
  • If a navigation block has a custom overlay then we should update the labels on the Color settings to only apply to Submenus and not to the Overlay. This is because the colors of the overlay should be controlled directly by editing the Overlay Template Part.
  • Currently both "mobile" and "desktop" variants of the block render the exact same markup and inner blocks no matter what the viewport is. All that changes is JavaScript and Styling. So if we want to render different content at different viewport we're going to need to render the custom overlay if it exists and then have conditionals in the JS and styling to show hide that depending on viewport size.

@getdave
Copy link
Contributor Author

getdave commented Nov 9, 2023

Here is how we can fetch the overlay in the PHP code

$theme                = 'emptytheme';
	$custom_overlay_id    = $theme . '//' . 'navigation-overlay-' . $attributes['ref'];
	$custom_overlay_query = new WP_Query(
		array(
			'post_type'           => 'wp_template_part',
			'post_status'         => 'publish',
			'post_name__in'       => array( 'navigation-overlay-' . $attributes['ref'] ),
			'tax_query'           => array(
				array(
					'taxonomy' => 'wp_theme',
					'field'    => 'name',
					'terms'    => $theme,
				),
			),
			'posts_per_page'      => 1,
			'no_found_rows'       => true,
			'lazy_load_term_meta' => false, // Do not lazy load term meta, as template parts only have one term.
		)
	);
	$custom_overlay_post  = $custom_overlay_query->have_posts() ? $custom_overlay_query->next_post() : null;

Then we can render it dynamically via do_blocks( $custom_overlay_post->post_content ).

@getdave
Copy link
Contributor Author

getdave commented Nov 9, 2023

Next step - break apart the rendering of the Nav block inner blocks so that we have x2 "modes":

  • Default - as currently rendering everything into a "Responsive Wrapper" which handles rendering the exact same inner blocks using special styling and behaviour for "mobile".
  • Custom Overlay - renders the standard Nav block inner blocks outside the responsive wrapper. Renders the Custom Overlay inside the Responsive Wrapper.

Alternatively we might be able to configure the Responsive Wrapper to render different content depending on whether there is a custom overlay. But that might be causing it to know too much.

@draganescu
Copy link
Contributor

Disable overlay controls for the Nav block within the overlay. How do we do this?

Doesn't filtering the block edit component allow us to do this?

Use metadata to provide a custom name for the Group block in the overlay (e.g. Overlay Background).

Did the idea of an overlay block fall off the map? Would this group be targetable from theme json by themes?

Is it possible to sync the block in the overlay so that if the menu in the parent Navigation block is changed then the menu in the overlay Navigation block is also changed.

If the navigation block refs the same navigation cpt what is there to sync?

if we want to render different content at different viewport

why do we want this?

@getdave
Copy link
Contributor Author

getdave commented Nov 10, 2023

Disable overlay controls for the Nav block within the overlay. How do we do this?

Doesn't filtering the block edit component allow us to do this?

Yep probably. But we only want to filter if the block is within a specific Template Part. What data is there to access that provides this info? Some discovery needs to be done. For example, we might need to add post meta to the Template Part to denote it as a "overlay" so that we can filter the Nav block accordingly 🤷

Use metadata to provide a custom name for the Group block in the overlay (e.g. Overlay Background).

Did the idea of an overlay block fall off the map? Would this group be targetable from theme json by themes?

Yes we decided we didn't need that. Indeed, we should avoid additional blocks if we can. However, if the problem above proves insurmountable we may need to revert to this approach.

Is it possible to sync the block in the overlay so that if the menu in the parent Navigation block is changed then the menu in the overlay Navigation block is also changed.

If the navigation block refs the same navigation cpt what is there to sync?

The question raised by others was, what happens if the menu in the parent Nav block is changed? Currently in this PR a totally new overlay will be created based on the template part provided by the Theme. However, that may not be desireable.

if we want to render different content at different viewport

why do we want this?

Because that's the objective of the entire exercise 😅 The idea as I understand it, is that you could have totally custom content in the overlay. Therefore the rendering of the overlay needs to know how to render

  • Standard Navigation (on "Desktop")
  • Custom Overlay (on "Mobile")

This is in contrast to the current system which renders the exact same markup on all viewports. Literally it uses the same components - it's just displayed differently using JS and CSS.

@MaggieCabrera
Copy link
Contributor

if we want to render different content at different viewport

why do we want this?

Because the content from desktop will not be the same as on the overlay once the user changes it

@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Nov 10, 2023

Quick summary of how the classes at play for the block works today. We are using the same HTML for mobile and desktop, and we alter its appearance with CSS. This will need to change for our purposes here. For my own better understanding and anyone else's:

  • When the overlay is off:
nav
	ul - nav items
  • When the overlay is set to Mobile:
nav.is-responsive
	button.wp-block-navigation__responsive-container-open 
	div.wp-block-navigation__responsive-container
		ul - nav items
  • When the overlay is set to Always:
nav.is-responsive
	button.wp-block-navigation__responsive-container-open.always-shown
	div.wp-block-navigation__responsive-container.hidden-by-default
		ul - nav items

@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Nov 10, 2023

Although there is no necessity to maintain backwards compatibility, we want to try to preserve the markup of the block as much as possible to avoid breaking sites that rely on custom CSS for the navigation block. The markup when an overlay is present but has not been customized by the user will stay the same:

nav.is-responsive
	button.wp-block-navigation__responsive-container-open
	div.wp-block-navigation__responsive-container
		nav items / desktop + mobile

And the proposed markup for when the user creates a custom overlay would be:

nav.is-responsive.has-custom-overlay
	button.wp-block-navigation__responsive-container-open
	div.wp-block-navigation__responsive-container
		nav items / desktop 
		nav items customized / mobile

The new customized overlay nav items will stay hidden until the menu is toggled. There are two questions this raises:

  • In terms of a11y, should the desktop navigation be hidden when the mobile nav is visible
  • How would this affect SEO for duplicating navigation items/links

The navigation items would only be duplicated only when the user has created a custom overlay for mobile.

/cc @WordPress/block-themers

EDIT:

A codepen with this mocked up: https://codepen.io/Marga-Cabrera/pen/GRzmxVR

@MaggieCabrera MaggieCabrera added the Needs Accessibility Feedback Need input from accessibility label Nov 10, 2023
@getdave getdave force-pushed the add/nav-overlay-as-template-part branch from 84cb759 to 918487f Compare November 27, 2023 12:43
@getdave

This comment was marked as resolved.

Copy link

github-actions bot commented Nov 28, 2023

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/experimental/navigation-overlay.php
❔ lib/blocks.php
❔ lib/experimental/blocks.php

@getdave

This comment was marked as outdated.

draganescu

This comment was marked as outdated.

@getdave getdave force-pushed the add/nav-overlay-as-template-part branch from dae6262 to a0c73c2 Compare December 6, 2023 14:14
@alexstine
Copy link
Contributor

An alternative could be to allow removal but trigger a warning when a user tries to remove. We do something similar with Post Content block I believe.

Not for the button, users should have to know they are breaking their site. I do not want the button for closing to be removable. Allowing an option even with a warning to trap users in modals is not something WordPress should provide an option for even if strongly discouraged.

Thanks.

@getdave
Copy link
Contributor Author

getdave commented Dec 7, 2023

I do not want the button for closing to be removable.

Thanks for confirming. I would agree - this PR currently locking down that button.

@alexstine Before this PR goes too much further, are you happy with the concept of hiding (I'm intentionally using display: none for this) the "desktop" navigation when the overlay is active and vice versa? @fabiankaegy was also concerned this could be a sticking point for a11y and I want to make sure what we're implementing is going to work well for all users. I feel like this is a grey area on "best practice" so I'd appreciate any input you or the a11y team might be able to provide. Thank you.

@getdave
Copy link
Contributor Author

getdave commented Dec 11, 2023

Next Steps

Let's try and get a working prototype again here. The criteria:

  • don't tie overlays to Navigation Menu posts (ditch the stuff with appending ref to the template part)
  • make sure a Theme can provide a template for the overlay
  • make sure it works on front of site and editor

Try and keep Navigation parent ref and the ref in the overlay in sync.

@alexstine
Copy link
Contributor

@getdave Not ignoring this intentionally. I was really backlogged when I returned from AWS re:Invent conference. Still trying to catch up. Hope to review this today.

Comment on lines 10 to 11
<!-- /wp:group --> No newline at end of file
<!-- /wp:group -->
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this bit?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a linting thing?

}
} else {
$content = $custom_overlay_post->post_content;
}


// Update the ref on the block
// if it doesn't have one, and turn off the overlay.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Update the ref:
    To enable themes to provide a navigation-overlay.html. The theme won't know what ref to give the block so we have to pass it from the parent block

  2. Turn off the overlay
    Navigation blocks inside an overlay can't also have an overlay otherwise we get into an infinite loop of overlays

@alexstine
Copy link
Contributor

@getdave Accessibility problem?

• Open Site Editor
• Click Nav Block in Header of site..
• Open inspector controls and locate the "Overlay" controls with the heading Overlay Menu.
• Set the menu to Always as this makes testing easier.
• Click the "Edit" button next to the heading OVERLAY MENU.

I do not see an Edit button next to that heading.

Comment on lines 77 to 90
if ( overlay ) {
goToOverlayEditor( overlay.id );
return;
}

// No overlay - create one from base template.
// TODO: catch and handle errors.
const overlayBlocks = buildOverlayBlocks(
baseOverlay.content.raw,
navRef
);
const newOverlay = await createOverlay( overlayBlocks );

goToOverlayEditor( newOverlay?.id );
Copy link
Contributor

@jeryj jeryj Dec 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

goToOverlayEditor is using history state, which isn't available on the Post Editor, so Clicking the Edit button on the Post Editor fails due to the undefined history state.

We'll need a different way to manage opening the Overlay Editor on the Post Editor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need a different way to manage opening the Overlay Editor on the Post Editor.

Agreed. History doesn't work here. I suggest we disable overlay editing in the Post Editor and display a message about how you can access this. There isn't really a flow that will work.

const onClick = () => {
if ( isSelected ) {
// Exit navigation overlay edit mode.
history.back();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are more routes available, so this doesn't work. Example repro:

  • From the Site Editor
  • Go to the Overlay Template Editor
  • Click the Site Logo/W in the top Left to open up the left Sidebar
  • Click the Editor Canvas
  • Click the Overlay X
  • The Editor Sidebar will open, and you can't exit the overlay edit directly back to the edtior

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we should still have the Back button navigation in the central header area as on other templates.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we should still have the Back button navigation in the central header area as on other templates.

That's turned into a wider problem. I agree we need it but it will need to be a seperate PR.

@getdave
Copy link
Contributor Author

getdave commented Dec 14, 2023

Update

I have posted (on the Issue) a set of what I believe to be the high level user requirements for this feature.

Comment on lines +793 to +807
.wp-block-navigation__overlay {
display: none;
width: 100%; // fill the overlay
height: 100%; // fill the overlay
}

.is-menu-open.has-custom-overlay {
.wp-block-navigation__overlay {
display: initial;
}

.wp-block-navigation__default {
display: none;
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should comment this to explain what is happening here. Basically it's show/hiding the different content depending on whether it's being shown within the overlay.

@@ -57,6 +57,7 @@
"@wordpress/private-apis": "file:../private-apis",
"@wordpress/reusable-blocks": "file:../reusable-blocks",
"@wordpress/rich-text": "file:../rich-text",
"@wordpress/router": "file:../router",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Router shouldn't be a dependency of the block library package as not every editor has one.

@glendaviesnz added a way to handle navigation in #57036 via an editor setting that will work across the post and site editors.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the pointer Dan 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There may be some modifications coming to that approach now as we need to extend it a little probably in order to get rid of the template-only mode, will hopefully get that sorted today.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the template-only mode

What is this mode you speak of?

Copy link
Contributor

@glendaviesnz glendaviesnz Jan 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this mode you speak of?

https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/store/actions.js#L579

It was added temporarily as part of the editor unification work, but we are now in the process of pulling it out again. Context being we wanted a way to edit a synced pattern in isolation in the post editor, so we looked at adding a pattern-only mode, but it was then decided that this was not very scalable as we didn't want modes for lots of different entities.

It was decided that a better approach would be to change the entity that was passed into the editor provider, and we added a getPostLinkProps editor setting which is a callback that returns an onClick event and href that changes the current entity in the editor.

We initially just used this for editing synced patterns in the post editor but I am now looking at doing the same for editing templates from the post editor, which currently uses the template-only mode. When working through this it seems our initial implementation doesn't extend quite so well for the wider use case, so I have a suggested refactoring of this here.

@getdave
Copy link
Contributor Author

getdave commented Jan 10, 2024

@getdave
Copy link
Contributor Author

getdave commented Jan 19, 2024

For anyone coming here late the latest status is available.

@getdave
Copy link
Contributor Author

getdave commented Feb 20, 2024

I'm rebasing this PR

@getdave getdave force-pushed the add/nav-overlay-as-template-part branch from d8b1479 to a4ccff6 Compare February 20, 2024 11:43
postId: overlayId,
postType: 'wp_template_part',
canvas: 'edit',
myNavRef: navRef,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
myNavRef: navRef,
myNavRef: navRef,

Let's rename this 🙏

@getdave
Copy link
Contributor Author

getdave commented Feb 20, 2024

I've rebased this and starting to take a look at it again after a long break. Here's what I'm thinking may help us to unblock this work a bit.

Essentially we need to decouple when and how the Nav block receives a ref. Currently in this PR it is either:

  • set by the user
  • inherited from the URL params (when inside a Navigation Overlay template part).

We could continue with the ability of the Navigation block can function without a ref being set as an attribute ( a "temporary ref"), but still behave as though a ref is set. A block should be able to retrieve its "temporary ref" from various contexts including:

  • URL params.
  • Block context (a parent block should be able to provide it).

In addition, Navigation Overlay as an template part area feels a little over the top. It's extremely specific semantically - it's basically an area that exists for a single block only. That feels wrong. However, we can't easily have an "Overlay" area as that's too broad. Therefore we should look to find a different mechanism for identifying template parts that are "Navigation Overlays" (e.g. following a slug pattern, tags, post meta...etc).

Todo

  • Creating overlay needs to prompt user for a unique name.
  • Remove inherit as a possible value of ref and instead refless Nav blocks always inherit from some context.
  • Ref-less Nav block does not allow editing the menu it inherits. Other aspects of editing (fonts, colors..etc) remain editable.
  • Remove navigation-overlay area and provide alternative mechanic for filtering template parts to only include "navigation overlays".
  • Refine the UX of the overlay selection - there are a few rough edges.

@mtias
Copy link
Member

mtias commented Aug 5, 2024

A template part / pattern still makes sense to me for this purpose. Perhaps we can model it after #61577 since it should be easy to unregister, replace, etc.

@getdave
Copy link
Contributor Author

getdave commented Nov 8, 2024

I'd like to advance this for a forthcoming WordPress release. I'm revisiting the current state and will try and summarize the work that is required and any outstanding blockers.

@colinduwe
Copy link
Contributor

I just tested this PR for the first time and the overlay is not displayed on the front end, sadly. 😢
I'd vote to keep the template part area. WRT what name to give the template part area l like "Menu" or to be consistent "Navigation." I just built a site that has a "Menu" template part area which is where the mobile overlay and all the various mega menus live. It doesn't seem too much to ask of the user when picking a template part to distinguish between "mobile overlay" and "about mega" when associating templates to blocks. It makes the Patterns page of the editor pretty clear.

@getdave
Copy link
Contributor Author

getdave commented Nov 22, 2024

I just tested this PR for the first time and the overlay is not displayed on the front end, sadly. 😢

Thank you for testing and the feedback. That functionality will definitely need ot be in place prior to merging 👍


// The new overlay should use the current Theme's slug.
const newOverlay = await createOverlay( overlayBlocks );

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overlay should be assigned to the block attributes here. Then the attribute can be used for backwards compatibility in index.php (if it has the attribute, do the new thing, else do the old thing)

const history = useHistory();

function goToOverlayEditor( overlayId, navRef ) {
history.push( {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This API has be removed it seems. I cannot seem to get history.navigate to work 😕

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Accessibility Feedback Need input from accessibility New Block Suggestion for a new block [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation Overlay customisation via Template Parts Ability to customise Navigation block "mobile" overlay